<template>
  <div
    style="
      margin: 0 auto;
      border: solid 0px;
      width: 800px;
      text-align: center;
      padding-top: 100px;
    "
  >
    <h1>登录</h1>
    <div style="border: solid 0px; width: 300px; margin: 0 auto">
      <el-form
        :model="userForm"
        :rules="rules"
        ref="userForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="userCode">
          <el-input v-model="userForm.userCode"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="userPassword">
          <el-input type="password" v-model="userForm.userPassword"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('userForm')">登录</el-button>
          <el-button @click="register">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      userForm: {
      },
      active: 0,
      rules: {
        userCode: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在2到5个字符', trigger: 'blur' }
        ],
        userPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios
            .post('http://localhost:8081/user/login', `userCode=${this.userForm.userCode}&userPassword=${this.userForm.userPassword}`)
            .then((result) => {
              if (result.data.responseCode == 200) {
                // alert(result.data.responseMessage)    
                sessionStorage.setItem('userCode', JSON.stringify(result.data.object))
                console.log(result.data.object)
                console.log(JSON.parse(sessionStorage.getItem("userCode")))
                this.$router.push('/')
              }
             
            })
          // alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
   register() {
      this.$router.replace('/zhuce')
    }
  }
}
</script>
